<template>
	<view>
		<view class="notice-item" v-for="(it,index) in res.items" :key="index">
			<text class="time">{{it.editDate}}</text>
			<view class="content" @click="goinfo(it)">
				<text class="title">{{it.title}}</text>
				<view class="img-wrapper image-wrapper" v-show="it.image!='/static/errorImage.jpg' && it.image">
					<image class="pic" :src="it.image" :class="[it.loaded]" mode="aspectFill" lazy-load @load="onImageLoad(index)" @error="onImageError(index)"></image>
				</view>
				<text class="introduce">
					{{it.summary}}
				</text>
				<view class="bot b-t">
					<text>查看详情</text>
					<text class="more-icon cuIcon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: '',
				res: [],
				isxl:false
			}
		},
		onLoad() {
			this.baseurl = this.$url;
			uni.showLoading({
				title: 'loading'
			});
			this.loadData();
		},
		onReachBottom(){
			//console.log('onReachBottom');
		},
		onPullDownRefresh() {
			this.isxl=true;
			this.res=[];
			this.loadData();
		},
		methods: {
			async loadData() {
				let that = this;
				this.$api.ajax('index/articlelist', {
					page: 1,
					limit: 10
				}, function(res) {
					if(that.isxl){
						that.isxl=false;
						uni.stopPullDownRefresh();
					}else{
						uni.hideLoading();
					}
					var data = res[1].data;
					if (data.statusCode == 200) {
						that.res = data.data;
						for (let i = 0; i < that.res.items.length; i++) {
							if(that.res.items[i].image){
								that.res.items[i].image = that.baseurl + that.res.items[i].image;
							}
						}
						console.log(that.res);
					} else {
						that.$api.msg('网络失败');
					}
				});
			},
			//监听image加载完成
			onImageLoad(index) {
				//console.log(this.res.items[index]);
				this.$set(this.res.items[index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(index) {
				this.res.items[index].image = '/static/errorImage.jpg';
			},
			goinfo(m) {
				uni.navigateTo({
					url: '/pages/notice/active?id='+m.id
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background-color: #f7f7f7;
		padding-bottom: 30upx;
	}

	.notice-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.time {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80upx;
		padding-top: 10upx;
		font-size: 26upx;
		color: #7d7d7d;
	}

	.content {
		width: 710upx;
		padding: 0 24upx;
		background-color: #fff;
		border-radius: 4upx;
	}

	.title {
		display: flex;
		align-items: center;
		height: 90upx;
		font-size: 32upx;
		color: #303133;
	}

	.img-wrapper {
		width: 100%;
		height: 300upx;
		position: relative;
	}

	.pic {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		font-size: 36upx;
		color: #fff;
	}

	.introduce {
		display: inline-block;
		padding: 16upx 0;
		font-size: 28upx;
		color: #606266;
		line-height: 38upx;
	}

	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80upx;
		font-size: 24upx;
		color: #707070;
		position: relative;
	}

	.more-icon {
		font-size: 32upx;
	}
</style>
